<nz-spin [nzSpinning]="isLoadingSave">
  <form nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <!-- 人员 -->
          <nz-form-label [nzSm]="6" [nzXs]="24">{{ 'personnel' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            {{ reExpenseSlip.person }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <!-- 日期 -->
          <nz-form-label [nzSm]="6" [nzXs]="24">{{ 'Date' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            {{ reExpenseSlip.date }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <!-- 项目名称 -->
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>{{ 'cost.item.name' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            {{ reExpenseSlip.proName }}
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <!-- 制单人 -->
          <nz-form-label [nzSm]="6" [nzXs]="24">{{ 'pm.quotation.Single.person' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            {{ reExpenseSlip.producer }}
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <!-- 审核人 -->
          <nz-form-label [nzSm]="6" [nzXs]="24">
            {{ 'pm.quotation.check' | translate }}{{ 'person' | translate }}
          </nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            {{ reExpenseSlip.reviewer }}
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>

  <nz-card>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="24">
        <nz-table
          style="padding-top: 5px;"
          nzSize="small"
          #basicTable
          [nzData]="itemDataList"
          [nzFrontPagination]="false"
          [nzShowPagination]="false"
        >
          <thead>
            <tr>
              <!-- 序号 -->
              <th nzAlign="center">{{ 'milestone.serial.number' | translate }}</th>
              <!-- 费用项目 -->
              <th>{{ 'pm.quotation.fee' | translate }}{{ 'project' | translate }}</th>
              <!-- 金额 -->
              <th>{{ 'their.fees.money' | translate }}</th>
              <!-- 上传附件 -->
              <th>
                {{ 'pm.project.archives.file.up.load' | translate
                }}{{ 'pm.project.archives.file.up.Enclosure' | translate }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of basicTable.data; let i = index">
              <td nzAlign="center">{{ i + 1 }}</td>
              <td style="width: 20%;">
                {{ data.costName }}
              </td>
              <td>
                {{ data.price }}
              </td>
              <td>
                <button nz-button nzType="primary" (click)="uploadDownload(data)">
                  {{ 'pm.project.archives.files.needed.to.be.uploaded.to.the.software' | translate }}
                </button>
                <!-- 几个文件 -->
                &nbsp;<nz-tag [nzColor]="'blue'">{{ data.files.length }}</nz-tag
                >{{ 'File' | translate }}
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
    </div>
  </nz-card>
</nz-spin>

<!-- 按钮 -->
<div class="base">
  <!-- 关闭按钮 -->
  <button nz-button (click)="close()" [nzLoading]="isLoadingSave">
    <span>{{ 'pm.quotation.cancel' | translate }}</span>
  </button>
</div>
